<template>
	<div class="recommend">
		<div class="bt">
			<span class="iconfont icon-collect">&#xe870;</span>猜你喜欢
		</div>
		<div class="place-list">
			<ul>
				<router-link :to="'/detail/'+item.id" tag="li" v-for="(item,index) of list" :key="index">
					<img class="place-img" :src="item.imgUrl" alt="">
					<div class="place-info">
						<h3 class="name">{{item.title}}</h3>
						<div class="star-comment">
							<span class="star">
								<i class="iconfont">&#xe86d;</i>
								<i class="iconfont">&#xe86d;</i>
								<i class="iconfont">&#xe86d;</i>
								<i class="iconfont">&#xe86d;</i>
							</span>
							<span class="comment"><em>{{item.commentNum}}</em>条评论</span>
						</div>
						<div class="price"><span>￥<em>{{item.price}}</em></span>起<span class="address">{{item.address}}</span></div>
					</div>						
				</router-link>
			</ul>
		</div>
	</div>
</template> 

<script>
	export default {
		name: 'HomeRecommend',
		props: {
			list:Array
		}
	}
</script>

<style lang="stylus" scoped>
	.recommend
		margin-top:.2rem
		padding-left:.25rem
		background:#fff
	.bt
		padding:.2rem 0
		line-height:.4rem
		font-size:.32rem
	.icon-collect
		margin-right:.1rem
		color:#f55
	.place-list
		li
			display:flex
			padding:.2rem 0
			border-top:.02rem solid #e0e0e0
			.place-img
				width:2rem
				height:2rem
				overflow:hidden
			.place-info
				flex:1
				margin-left:.2rem
				.name
					margin-top:.2rem
					line-height:.44rem
					font-size:.32rem
					color:#212121
				.star-comment
					margin-top:.15rem
					height:.35rem
					.star
						color:#ff8300
						i
							font-size:.26rem
					.comment
						font-size:.24rem
						color:#616161
				.price
					position:relative
					margin-top:.2rem
					color:#616161
					span
						font-size:.24rem
						color:#ff8300
						em
							font-size:.4rem
					.address
						position:absolute
						bottom:0
						right:.3rem
										
</style>